<template>
  <div class="index">
    <div class="container">
      <my-menu></my-menu>
      <div class="main">
        <div class="nav">
          <div class="userName">欢迎 {{userInfo.userInfo.email}}</div>
          <div class="exit" v-if="userInfo.userInfo.email" @click="handleExit">退出</div>
        </div>
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
  import Menu  from '@/components/Menu';
  import Vue from "vue";
  import router from "../router";
  export default {
    name: 'Index',
    components: {
      'my-menu': Menu
    },
    data() {
      return {
        userInfo:null,
      };
    },
    created() {
      this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      console.log(this.userInfo)
    },
    methods: {
      handleExit(){
        sessionStorage.removeItem("userInfo");
        router.replace({path:"/login"})
      }
    }
  }
</script>
<style lang="less" scoped>
  .index,.container{
    height: 100%;
    width: 100%;
  }
  .container{
    display: flex;
    .main{
      flex: 1;
      margin-left: 1px;
      .nav{
        padding-right: 30px;
        text-align: right;
        height: 60px;
        line-height: 60px;
        background: rgb(84, 92, 100);
        color:rgb(255, 208, 75);
        display: flex;
        justify-content: flex-end;
        .exit{
          cursor: pointer;
          margin-left: 20px;
          color:#fff;
          font-size:12px;
        }
      }
    }
  }
</style>
